import React, { Component } from 'react';
import { goodinfo } from "../api/detail";
import { good_fav } from "../api/colloction";
import { shopcart_add } from "../api/cart";
import MySwiper from "../component/MySwiper";
import { NavBar, Skeleton, Toast,Button} from 'antd-mobile'
import {
    SendOutline,
    StarOutline,
    GiftOutline,
    StarFill
    
  } from 'antd-mobile-icons'
import '../styles/detail.scss'
class Detial extends Component {
    constructor(props) {
        super(props)
        this.state = {
           
           
            list: {},
            tabs: [
                {title:"收藏",key:'',icon:<StarOutline />},
                {title:"分享",key:'',icon:  <SendOutline />},
                {title:"购物车",key:'',icon:<GiftOutline />},
            ],
            res1: '',
            data:''
        }
    }
    back() { 
        this.props.history.goBack()
    }
    handClick() {
        good_fav({ userid: localStorage.getItem("userid"), goodid: this.state.list.id }).then((res) => {
            console.log(res)
            if (res.data.code === 200) {
                this.setState({res1:200})
                Toast.show({
                    icon: 'success',
                    content: '收藏成功',
                  })
            }
        })
    }
   async componentDidMount() {
       var res = await goodinfo({ goodid: this.props.location.state.goodid })
       if (res.data.code === 400) {
        this.setState({data:res.data.code})
       }
       console.log(res.data)
       res.data.goodinfo.pics=
       res.data.goodinfo.pics&&
       res.data.goodinfo.pics.map((item,index)=>{
        return {pic:item}
       })
       this.setState({list: res.data.goodinfo })
     
    }
    myClick() {
        shopcart_add({ userid: localStorage.getItem('userid'), goodid: this.state.list.id }).then((res) => {
            console.log(res)
            if (res.data.code === 200) {
                Toast.show({
                    icon: 'success',
                    content: '加入购物车',
                  })
            }
        })
    }
    render() {
        return (
            <div className='detail'>
                         <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                {    this.state.data === 400 ? <p className='nothing1'>该商品已下架~</p> :
                       
                     <>
            
                  <MySwiper banner={this.state.list.pics}></MySwiper>
                   
                          
                     <div className='box'>
                         <div>
                                 <span className='span-left' >满减</span>
                             <span>活动价<span className='span-right'>￥{  this.state.list.salesPrice ?
                                     this.state.list.salesPrice.value  : 0}</span></span>
                         </div>
                         <p>距结束5天0小时</p>
                     </div>
                     <p>{this.state.list.name}</p>
                     <p>{this.state.list.brandEN + this.state.list.brand}</p>
                     <div className='footer-box'>
                         <div className='span-box'>
                             {
                                 this.state.res1===200?<span className='span-item'>
                                 <StarFill />
                                         <span>已收藏</span>
                                 </span>:<span className='span-item' onClick={()=>{this.handClick()}}>
                         <StarOutline />
                                 <span>收藏</span>
                         </span>
                             }
                         
                         <span className='span-item'>
                         <SendOutline />
                                 <span>分享</span>
                           </span>
                         <span className='span-item'>
                         <GiftOutline />
                         <span>购物车</span>
                                </span>
                            
                                </div>
                             
                  
                           
                         
                          
                    
                         <div className='left'>
                         <Button size='middle' shape='rounded'  color='warning' onClick={()=>{this.myClick()}}>
                         加入购物车
               </Button>
                         <Button size='middle' shape='rounded' color='danger'>
                         立即购买
               </Button>
                         
                         </div>
                         
                     </div>
              
                
                        </>
                       
                     
                }
               
            </div>
        );
    }
}

export default Detial;